<template>
  <div>
    <Form inline v-model="params">
      <Form-item>
        <Checkbox-group v-model="params.status" @on-change="fetchData">
          <Checkbox label="-1">
            <tag type="dot" color="red">已取消</tag>
          </Checkbox>
          <Checkbox label="0">
            <tag type="dot" color="yellow">待发货</tag>
          </Checkbox>
          <Checkbox label="1">
            <tag type="dot" color="blue">已发货</tag>
          </Checkbox>
          <Checkbox label="2">
            <tag type="dot" color="green">已完成</tag>
          </Checkbox>
        </Checkbox-group>
      </Form-item>
      <Form-item prop="search">
        <Input v-model="params.search" placeholder="搜索订单号..." style="width: 240px" @on-change="fetchData"></Input>
      </Form-item>
      <Form-item>
        <Date-picker v-model="params.date" type="daterange" placement="bottom-end"
                     placeholder="选择日期" @on-change="dateRange"></Date-picker>
      </Form-item>
      <Form-item>每页显示
        <Select v-model="params.limit" style="width:80px" @on-change="changeLimit">
          <Option value="10">10</Option>
          <Option value="20">20</Option>
          <Option value="50">50</Option>
          <Option value="100">100</Option>
        </Select> 条
      </Form-item>
    </Form>
    <Table :context="self" :data="tableData" :columns="tableColumns" stripe></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="recordsFiltered" :current="params.page" :pageSize="params.limit" @on-change="changePage"></Page>
      </div>
    </div>
    {{params}}
  </div>
</template>
<script>
  export default {
    data () {
      return {
        self: this,
        recordsTotal: 0,
        recordsFiltered: 0,
        ext: undefined,
        params: {
          limit: 10,
          order: 'create_time',
          page: 1,
          search: '',
          status: [],
          date: []
        },
        tableData: [],
        tableColumns: [
          {
            title: '订单号',
            key: 'id',
            sortable: true
          },
          {
            title: '状态',
            key: 'status',
            render (row) {
              let color, text
              switch (parseInt(row.status)) {
                case -1:
                  color = 'red'
                  text = '已取消'
                  break
                case 0:
                  color = 'yellow'
                  text = '待发货'
                  break
                case 1:
                  color = 'blue'
                  text = '已发货'
                  break
                case 2:
                  color = 'green'
                  text = '已完成'
                  break
                default:
                  color = 'red'
                  text = '未知状态'
                  break
              }
              return `<tag type="dot" color="${color}">${text}</tag>`
            }
          },
          {
            title: '客户ID',
            key: 'id'
//            render (row, column, index) {
//              return `<Poptip trigger="hover" title="${row.portrayal.length}个画像" placement="bottom">
//                                        <tag>${row.portrayal.length}</tag>
//                                        <div slot="content">
//                                            <ul><li v-for="item in tableData1[${index}].portrayal" style="text-align: center;padding: 4px">{{ item }}</li></ul>
//                                        </div>
//                                    </Poptip>`
//            }
          },
          {
            title: '单价',
            key: 'unit'
          },
          {
            title: '数量',
            key: 'num'
          },
          {
            title: '总价',
            key: 'total'
          },
          {
            title: '创建时间',
            key: 'create_time'
          },
          {
            title: '完成时间',
            key: 'end_time'
          },
          {
            width: 120,
            title: '操作',
            key: 'id',
            render (row, column, index) {
              return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="success" size="small" @click="show(${index})">发货</i-button>`
            }
          }
        ]
      }
    },
    methods: {
      changePage (page) {
        // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
        this.params.page = page
        this.fetchData()
      },
      changeLimit (limit) {
        // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
        this.params.limit = limit
        this.changePage(1)
      },
      dateRange: function (date) {
        this.params.date = date
        this.fetchData()
      },
      fetchData: function () {
        let vm = this
        this.$http.post('orders', this.params).then(function ({data}) {
          vm.tableData = data.data
          vm.recordsFiltered = parseInt(data.recordsFiltered)
          vm.recordsTotal = parseInt(data.recordsTotal)
        })
      },
      show: function (index) {
        console.log(index)
        this.$store.commit('UPDATE_INFO', {username: '13245434'})
      }
    },
    computed: {},
    created: function () {
      this.fetchData()
    }
  }
</script>
